<template>
    <div class="continer">
        <div class="addSpaceBtn">
            <el-button type="primary" @click="addSpace">添加</el-button>
        </div>
        <div class="search">
            <el-form :model="search" ref="sc" @submit.native.prevent>
                <el-form-item label="" prop="id">
                    <el-input type="text" v-model="search.id" placeholder="请输入空间id"></el-input>
                </el-form-item>
                <el-form-item label="" prop="name" style="width: 210px;">
                    <el-input type="text" v-model="search.name" placeholder="请输入空间名称"></el-input>
                </el-form-item>
                <el-button type="primary" class="ml_10" @click="getList()" native-type="submit">搜索</el-button>
                <el-button @click="resetForm('sc')">重置</el-button>
            </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%" stripe border>
            <el-table-column prop="id" label="id"> </el-table-column>
            <el-table-column prop="name" label="空间名称"> </el-table-column>
            <el-table-column prop="addr" label="空间地址"> </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button v-for="(item, index) in caozuoList" :key="index" type="text" size="mini" @click="caozuo(scope.row, index)">{{item}}</el-button>
					<el-button type="text" size="mini" @click="kongjianziliaoClick(scope.row.id)">空间资料</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 日志 -->
        <el-dialog title="日志" :visible.sync="rizhiShow" width="1100px">
            <el-table :data="rizhiList" style="width: 100%">
              <el-table-column prop="id" label="序号"> </el-table-column>
              <el-table-column prop="action" label="入驻"> </el-table-column>
              <el-table-column prop="create_time" label="创建时间"> </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="close">关 闭</el-button>
            </div>
        </el-dialog>
        <!-- 分页 -->
        <el-pagination
            background
            layout="prev, pager, next, jumper"
            :page-size="limit"
            :total="listLen"
            :current-page.sync="currentPage"
            @current-change="toPage"
            class="txt_r mt_20"
        ></el-pagination>
        <!-- 空间资料 -->
        <el-dialog title="空间资料" :visible.sync="showKjzl" width="85%">
            <el-button type="primary" @click="addKjzlClick">添加</el-button>
            <div class="search">
                <el-form :model="kjzlSearch" ref="kjzlSc" @submit.native.prevent>
                    <el-form-item label="" prop="id">
                        <el-input type="text" v-model="kjzlSearch.id" placeholder="请输入资料id"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="name" style="width: 210px;">
                        <el-input type="text" v-model="kjzlSearch.name" placeholder="请输入资料名称"></el-input>
                    </el-form-item>
                    <el-button type="primary" class="ml_10" @click="kongjianziliaoClick(kjzlSearch.space_id)" native-type="submit">搜索</el-button>
                </el-form>
            </div>
            <el-table :data="kjzlList" style="width: 100%">
              <el-table-column prop="id" label="序号"> </el-table-column>
              <el-table-column prop="name" label="资料名称"> </el-table-column>
              <el-table-column prop="file_path" label="资料地址"> </el-table-column>
              <el-table-column prop="create_time" label="创建时间"> </el-table-column>
              <el-table-column label="操作">
                  <template slot-scope="scope">
              		<el-button type="text" size="mini" @click="kjzlDel(scope.row.id)">删除</el-button>
                  </template>
              </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showKjzl = false">关 闭</el-button>
            </div>
            <el-pagination
                background
                layout="prev, pager, next, jumper"
                :page-size="kjzlLimit"
                :total="kjzlListLen"
                :current-page.sync="kjzlCurrentPage"
                @current-change="kjzlToPage"
                class="txt_r mt_20"
                style="float: left;"
            ></el-pagination>
        </el-dialog>
        <!-- 添加空间资料 -->
        <el-dialog title="添加空间资料" :visible.sync="showAddKjzl" width="60%">
            <el-form :model="addKjzlForm" ref="kjzl" @submit.native.prevent :rules="addkjzlFormRules">
                <el-form-item label="资料地址 : " prop="file_path">
                    <el-upload
                      class="upload-demo"
                      :action="BASE_URL + '/admin/file/upload/createfile'"
                      :multiple='false'
                      :limit="1"
                      :file-list="fileList"
                      :on-success="addPathSuccess"
                      :on-remove="addPathRemove"
                      :on-exceed="addPathExceed"
                      >
                      <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="资料名称 : " prop="name">
                    <el-input type="text" v-model="addKjzlForm.name" placeholder="请输入资料名称"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="infor" @click="addKjzlQuxiao">取 消</el-button>
                <el-button type="primary" @click="addkjzl">确 认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { getSpaceList, delSpaceList, getLog, getSpaceFile, addSpaceFile, delSpaceFile } from "../../api/spaceManagement";
    import { BASE_URL } from '../../config/app.js';
    export default {
        name: "spaceManagement",
        data() {
            return {
                BASE_URL: '',
                tableData: [],
                search: {
                    id: "",
                    name: ""
                },
                spaceType: [
                    {value:"1", label:"工位"},
                    {value:"2", label:"房间"},
                    {value:"3", label:"会议室"}
                ],
                caozuoList: ["详情", "日志" ,"查看", "删除"],
                spaceObj: {},
                showForm: false,
                formRules: {
                    code: [{required: true,message: "请输入工位房间会议室编号",trigger: "blur"}],
                    people_num: [{required: true,message: "请输入可容纳人数",trigger: "blur"}],
                    area: [{required: true,message: "请输入面积",trigger: "blur"}],
                    status: [{required: true,message: "请输入状态",trigger: "blur"}],
                },
                // 分页
                limit: 30,
                listLen: 0,
                currentPage: 1,
                // 日志
                rizhiShow: false,
                rizhiList: [],
                // 空间资料
                showKjzl: false,
                kjzlList: [],
                kjzlLimit: 15,
                kjzlListLen: 0,
                kjzlCurrentPage: 1,
                kjzlSearch: {
                    space_id: '',
                    name: '',
                    id: ''
                },
                showAddKjzl: false,
                addKjzlForm: {
                    space_id: '',
                    file_path: '',
                    name: ''
                },
                addkjzlFormRules: {
                    file_path: [{ required: true, message: "请输入资料地址", trigger: "blur" }],
                    name: [{ required: true, message: "请输入资料名称", trigger: "blur" }]
                },
                fileList: []
            };
        },
        methods: {
            // 获取空间列表信息
            getList(page = 1){
            	getSpaceList({
                    ...this.search,
                    page: page
                }).then((response) => {
                    if(response.code == 0){
                        this.tableData = response.data.list;
                        this.listLen = response.data.total;
                    }else{
                        this.$message.error(response.message);
                    }
            	}).catch(() => {
            		this.$message.error("列表数据获取失败");
            	})
            },
            // 添加空间
            addSpace(){
                this.$router.push({ path: '/spaceManagement/addSpace' });
            },
            // 重置搜索框
            resetForm(name){
                this.$refs[name].resetFields();
            },
            // 列表操作
            caozuo(row, num){
                if(num == 0){ // 详情
                    this.$router.push({ path: '/spaceManagement/spaceDetail' }); // 跳转页面，传递参数
                    window.localStorage.setItem("spaceList", JSON.stringify(row));
                }else if(num == 1){ // 日志
                    this.rizhiShow = true;
					getLog({ room_id: row.id }).then((response) => {
                        if(response.code){
                            this.$message.error(response.message);
                        }
                        this.rizhiList = response.data.list;
					}).catch(() => {
						this.$message.error('数据获取失败');
					})
                }else if(num == 2){ // 查看
                    this.$router.push({ path: '/spaceManagement/spaceList' });
                    window.localStorage.setItem("spaceId", row.id);
                }else if(num == 3){ // 删除
                    this.$confirm("确定删除该工位、房间或会议室吗", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then((response)=>{
                        delSpaceList({id: row.id}).then((data)=>{
                            if(data.code){
                                this.$message.error(data.message);
                                return;
                            }
                            this.$message.success("删除成功");
                            this.getList();
                        }).catch(()=>{
                            this.$message.error("删除失败");
                        })
                    }).catch(()=>{
                        this.$message.info("取消删除");
                    });
                }
            },
            // 关闭日志
            close(){
                this.rizhiShow = false;
            },
            // 分页
            toPage(val){
                this.currentPage = val;
                this.getList(val);
            },
            kongjianziliaoClick(id, page = 1){
                this.showKjzl = true;
                this.addKjzlForm.space_id = id;
                this.kjzlSearch.space_id = id;
                getSpaceFile({
                    ...this.kjzlSearch,
                    page: page,
                }).then((res) => {
                    if(res.code == 0){
                        this.kjzlList = res.data.data;
                        this.kjzlListLen = res.data.total;
                        for(var i = 0; i < this.kjzlList.length; i++){
                            this.kjzlList[i].file_path = this.BASE_URL + '/' + this.kjzlList[i].file_path;
                        }
                    }else{
                        this.$message.error(res.message);
                    }
                }).catch(() => {
                    this.$message.error("数据获取失败");
                })
            },
            kjzlToPage(val){
                this.currentPage = val;
                this.kongjianziliaoClick(this.kjzlSearch.space_id, val);
            },
            addKjzlClick(){
                this.showAddKjzl = true;
            },
            addkjzl(){
                this.$refs['kjzl'].validate((valid) => {
                    if (!valid) {return false;}
                    addSpaceFile(this.addKjzlForm).then((data) => {
                        if(data.code == 0){
                            this.showAddKjzl = false;
                            this.$message.success("添加成功");
                            this.kongjianziliaoClick(this.kjzlSearch.space_id);
                            this.fileList = [];
                            this.addKjzlForm.name = '';
                        }else{
                            this.$message.success(data.message);
                        }
                    })
                })
            },
            addKjzlQuxiao(){
                this.showAddKjzl = false;
                this.fileList = [];
                this.addKjzlForm.name = '';
            },
            addPathSuccess(response, file, fileList){
                if(response.code == 0){
                    this.addKjzlForm.file_path = response.data.key;
                }else{
                    this.$message.error(response.message);
                }
            },
            addPathRemove(file, fileList){
                this.addKjzlForm.file_path = "";
            },
            addPathExceed(){ // 上传文件超出限制个数
                this.$message.warning("上传文件超出限制个数");
            },
            kjzlDel(id){
                this.$confirm("确定删除该工位、房间或会议室吗", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then((response)=>{
                    delSpaceFile({id: id}).then((data)=>{
                        if(data.code){
                            this.$message.error(data.message);
                            return;
                        }
                        this.$message.success("删除成功");
                        this.kongjianziliaoClick(this.kjzlSearch.space_id);
                    }).catch(()=>{
                        this.$message.error("删除失败");
                    })
                }).catch(()=>{
                    this.$message.info("取消删除");
                });
            }
        },
        created() {
            this.getList();
            this.BASE_URL = BASE_URL;
        }
    };
</script>

<style>
.addSpaceBtn{
    float: left;
    /* margin-bottom: 20px; */
}
.search{float: right;}
.search .el-form-item{margin-bottom: 20px; display: inline-block; margin-right: 15px;}
.txt_r {text-align: right;}
</style>
